<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="admin/module/_header"></div>
<div class="wrapper">
    <!-- 菜单栏模块 -->
    <div th:replace="admin/module/_sidebar"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <style type="text/css">
            #cateId option {
                border-radius: 0;
            }

            .form-horizontal .control-label {
                text-align: left;
            }

            .editor-preview-active img, .editor-preview-active-side img {
                width: 100%;
            }

            .fr-toolbar {
                border-top: 1px solid #ccc !important;
            }

            .fr-wrapper > div[style*='z-index: 9999'] {
                position: absolute;
                top: -10000px;
                opacity: 0;
                height: 0;
            }

            .fr-view img.fr-dib {
                margin: 5px !important;
                width: 400px !important;
                height: 200px !important;
            }
        </style>
        <section class="content-header">
            <h1 style="display: inline-block;">房屋修改</h1>
            <ol class="breadcrumb">
                <li>
                    <a data-pjax="true" href="#"><i
                            class="fa fa-dashboard"></i> 首页</a>
                </li>
                <li>
                    <a data-pjax="true" href="#">房屋管理</a>
                </li>
                <li class="active">房屋修改</li>
            </ol>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="box box-primary">
                        <!-- form start -->

                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <input type="hidden" id="houseId" th:value="${house.id}">
                                    <div class="form-group">
                                        <label for="cityId">所属城市</label>
                                        <select class="form-control  input-lg" id="cityId" disabled>
                                            <option th:each="c : ${cities}" th:value="${c.id}" th:selected="${c.id == house.cityId}">[[${c.cityName}]]
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="houseTitle">房屋地址</label>
                                        <input type="text" class="form-control input-lg" id="houseTitle" disabled
                                               placeholder="请输入房屋地址(如南山区西丽镇茶光小区)"  th:value="${house.houseTitle}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="number">门牌号</label>
                                        <input type="text" class="form-control input-lg" id="number" disabled
                                               placeholder="门牌号(如10栋3单元305室)"  th:value="${house.number}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="cateId">房屋类型</label>
                                        <select class="form-control  input-lg" id="cateId" disabled>
                                            <option th:each="c : ${categories}" th:value="${c.id}">[[${c.cateName}]]
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="roomCount">面积，单位m²</label>
                                        <input type="number" class="form-control input-lg col-md-3" id="area"
                                               placeholder="房屋面积，单位m²" th:value="${house.area}" disabled>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="toiletCount">租金/月，单位元</label>
                                        <input type="number" class="form-control input-lg" id="dayPrice"
                                               placeholder="月租价格" th:value="${house.dayPrice}" disabled>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="toiletCount">押金，单位元</label>
                                        <input type="number" class="form-control input-lg" id="deposit"
                                               placeholder="押金" th:value="${house.deposit}" disabled>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="roomCount">房间数量</label>
                                        <select class="form-control input-lg" id="roomCount" disabled>
                                            <option value="1" th:selected="${1 == house.roomCount}">1个</option>
                                            <option value="2" th:selected="${2 == house.roomCount}">2个</option>
                                            <option value="3" th:selected="${3 == house.roomCount}" >3个</option>
                                            <option value="4" th:selected="${4 == house.roomCount}">4个</option>
                                            <option value="5" th:selected="${5 == house.roomCount}">5个</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="toiletCount">洗手间数量</label>
                                        <select class="form-control  input-lg" id="toiletCount" disabled>
                                            <option value="0" th:selected="${0 == house.toiletCount}">0个</option>
                                            <option value="1" th:selected="${1 == house.toiletCount}">1个</option>
                                            <option value="2" th:selected="${2 == house.toiletCount}">2个</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <label for="houseThumbnail">缩略图</label>
                                            <input id='houseThumbnail' name="houseThumbnail" placeholder="缩略图"
                                                   class="form-control input-lg" th:value="${house.houseThumbnail}"
                                                   onclick="$('#houseThumbnailFile').click();">
                                            <label class="input-group-btn">
                                                <input type="button" id="i-check" value="上传缩略图"
                                                       style="border-radius: 0; border-left: 0;margin-top: 24px;"
                                                       class="btn btn-info btn-lg"
                                                       onclick="$('#houseThumbnailFile').click();">
                                            </label>
                                            <input type="file" id="houseThumbnailFile" accept=".png, .jpg, .jpeg"
                                                   style="display: none">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="houseContent">房屋描述信息</label>
                                <div class="form-group" id='houseContent' th:utext="${house.houseContent}">请详细描述房屋信息</div>
                            </div>

                            <label for="edit">房屋图片合集</label>
                            <div class="form-group" id='edit' th:utext="${house.houseEditor}">房屋图片</div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ownerName">出租方姓名</label>
                                        <input type="text" class="form-control input-lg" id="ownerName" th:value="${house.ownerName}"
                                               placeholder="请填写出租方姓名">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ownerPhone">出租方联系方式</label>
                                        <input type="text" class="form-control input-lg" id="ownerPhone" th:value="${house.ownerPhone}"
                                               placeholder="请填写出租方真实联系方式">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            <button type="button" class="btn btn-primary" onclick="push(0)">修改</button>
                        </div>

                    </div>
                </div>
            </div>

        </section>
        <script>

            //页面加载完成后再执行
            $(function () {
                $('#houseContent').froalaEditor({
                    heightMin: 300,
                    heightMax: 1000,
                    placeholderText: '',
                    pastePlain: true,
                    theme: 'gray',
                    fontFamilySelection: true,
                    fontSizeSelection: true,
                    paragraphFormatSelection: true,
                    toolbarButtons: ['paragraphFormat', 'bold', 'italic', 'underline', 'strikeThrough', 'quote', 'insertLink', 'emoticons', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable',
                        'align', 'formatOL', 'formatUL', 'fullscreen'],
                    imageAllowedTypes: ['jpg', 'gif', 'png', 'jpeg', 'svg', 'psd'],
                    imageDefaultWidth: 100,
                    imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
                    imageUploadURL: '/admin/file/upload',
                    imageManagerLoadURL: '/admin/file/upload',
                    imageManagerLoadMethod: "GET",
                    imageManagerPageSize: 4,
                    imageManagerScrollOffset: 20,
                    fileUploadURL: '/admin/file/upload',
                    videoUploadURL: '/admin/file/upload',
                    imagePaste: true,
                    imageMove: true,
                    pastePlain: true,
                    fileMaxSize: 1024 * 1024 * 2000,
                    toolbarStickyOffset: 50,
                    tableResizer: true,
                    language: 'zh_cn'
                });

            });

            //页面加载完成后再执行
            $(function () {
                $('#edit').froalaEditor({
                    heightMin: 300,
                    heightMax: 1000,
                    placeholderText: '',
                    pastePlain: true,
                    theme: 'gray',
                    fontFamilySelection: true,
                    fontSizeSelection: true,
                    paragraphFormatSelection: true,
                    toolbarButtons: ['insertImage'],
                    imageAllowedTypes: ['jpg', 'gif', 'png', 'jpeg', 'svg', 'psd'],
                    imageDefaultWidth: 100,
                    imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
                    imageUploadURL: '/admin/file/upload',
                    imageManagerLoadURL: '/admin/file/upload',
                    imageManagerLoadMethod: "GET",
                    imageManagerPageSize: 4,
                    imageManagerScrollOffset: 20,
                    fileUploadURL: '/admin/file/upload',
                    videoUploadURL: '/admin/file/upload',
                    imagePaste: true,
                    imageMove: true,
                    pastePlain: true,
                    fileMaxSize: 1024 * 1024 * 2000,
                    toolbarStickyOffset: 50,
                    tableResizer: true,
                    language: 'zh_cn'
                });

            });

            /**
             * 上传缩略图
             */
            $('body').on('change', '#houseThumbnailFile', function () {
                var formData = new FormData();
                var files = $($(this))[0].files[0];
                formData.append("file", files);
                $.ajax({
                    url: '/admin/file/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        $('#houseThumbnail').val(data.link);
                        // alert('上传成功');
                    }
                    , error: function (res) {
                        // alert('错误');
                    }
                });
            })


        </script>
    </div>

</div>
<div th:replace="admin/module/_footer"></div>